<template>
  <div class="goal-wrapper">
    <div class="goal-content" :style="{'top': goal.top + 'px', 'left': goal.taskDatatype==='2' ? goal.left : 45 + 'px', 'height': goalHeight + 'px', 'width': goalWidth + 'px', 'min-height': goalHeight, 'margin-bottom': goalOffset + 'px', 'background-color': goal.taskDatatype ==='2' ? '#FFF' : '#ddebf9'}">
      <span v-if="goal.belongId && goal.row !== 1" class="left-line" :style="{'top': (goalHeight/2) + 'px'}"></span>
      <span v-if="goal.drawTopLine || goal.row===1" class="top-line" :style="{'height': getTopLineHeight() + 'px', 'bottom': goalHeight/2 + 'px'}"></span>
      <span v-if="goal.hasChild && goal.show" class="next-line" :style="{'left': goalOffset/2 + 'px', 'height':  ((goalHeight+goalOffset)/2-4) + 'px', 'bottom': (-(goalHeight+goalOffset)/2+4) + 'px'}"></span>
      <i class="el-icon-plus add-btn" v-if="goal.taskDatatype==='2' && goal.taskStatus === '1' && goal.taskDeleteStatus ==='0'" @click="addSubTask"></i>
      <i class="show-btn" v-if="goal.hasChild" :class="goal.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="toggleChild(goal.show)"></i>
      <div class="item" :class="{'sub-item': goal.taskDatatype==='3'}" @click="openTaskDetail(goal.id)">
        <span class="arrow-status" :class="getArrowType(goal)"></span>
        <span class="task-status">{{getWord(goal)}}</span>
        <div class="circle" v-if="goal.taskDatatype==='2'">{{index+1}}</div>
        <div class="top">
          <div v-if="goal.taskDatatype==='2'"><img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+goal.taskUrl"  style="width: 48px; height: 48px;border-radius: 5px;"></div>
          <div :class="goal.taskDatatype==='2' ? 'title' : 'title2'">{{goal.taskName}}</div>
        </div>
        <div class="bottom">
          <p><i class="el-icon-user"></i><span>{{goal.taskPrincipalName}}</span></p>
          <p>
            <span v-if="goal.taskRealEndtime">{{goal.taskRealEndtime}}</span>
            <span v-if="analyzeData(goal)" :style="{'color': analyzeData(goal).indexOf('提前')>= 0 ? '#21D779': '#FF5050'}">（{{analyzeData(goal)}}）</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {dateUtil} from '@/utils/dateUtil'

export default {
  data() {
    return {
      
    }
  },
  props: ['goal', 'index', 'goalHeight', 'goalWidth', 'goalOffset'],
  methods:{
    toggleChild(type) {
      type ? this.$emit('closeChild', this.goal) : this.$emit('openChild', this.goal)
    },
    getTopLineHeight() {
      return this.goal.top - this.goal.topgoal
    },
    openTaskDetail(id) {
      this.$router.push({ name: 'mlivolobim-taskDetail', params: {id: id}});
    },
    getArrowType(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? 'arrow-4': 'arrow-2'
      }else if(item.taskStatus === '9') {
        return 'arrow-3'
      }else if(item.taskStatus === '2') {
        return 'arrow-6'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return 'arrow-5'
        } else{
          return 'arrow-1'
        }
      }
    },
    getWord(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()).getTime() >= new Date(item.taskStartTime).getTime()? '进行中': '未开始'
      }else if(item.taskStatus === '9') {
        return '已终止'
      }else if(item.taskStatus === '2') {
        return '待确认'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return '逾期完成'
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          return '按时完成'
        }else{
          return '提前完成'
        }
      }
    },
    analyzeData(item) {
      if(item.taskStatus === '1') {
        if(new Date(dateUtil.thisDay()) < new Date(item.taskStartTime).getTime()){
          return ''
        }else {
          if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
            return `逾期${time}天`
          }else {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
            return `剩余${time}天`
          }
        }
      }else if(item.taskStatus === '9') {
        return ''
      }else if(item.taskStatus === '2') {
        if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
          return `逾期${time}天`
        }else {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
          return `剩余${time}天`
        }
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `逾期${time}天`
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return ''
        }else{
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `提前${time}天`
        }
      }
    },
    // 计算两个日期的时间差
    daysDiff(oDate1,oDate2){
      let  aDate, iDays;
      oDate1 = new Date(oDate1);
      oDate2 = new Date(oDate2);
      iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24);
      return Math.abs(iDays)
    },
    async addSubTask() {
      let taskInfo = await this.$httpN.postB('division/task/taskInfo', {id: this.goal.id})
      if(taskInfo.hasTaskModifyAuthority !== '1') return this.mobileAlert('您没有操作权限');
      this.$router.push({ name: 'mlivolobim-addTask', params: {id: this.goal.id, taskName: this.goal.taskName, projectName: this.goal.taskBelongName}})
    },
  }
}
</script>

<style lang="scss" scoped>
.goal-wrapper {
  width: 100%;
  .goal-content{
    background: white;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 3px 4px #cccccc;
    .top-line{
      width: 1px;
      background: #BABABA;
      position: absolute;
      left: -35px;
    }
    .left-line{
      height: 1px;
      width: 35px;
      background: #BABABA;
      position: absolute;
      left: -35px;
    }
    .next-line{
      width: 1px;
      background: #BABABA;
      position: absolute;
    }
    .circle {
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      transition: .15s ease-out;
      background-color: #FFF;
      text-align: center;
      position: absolute;
      top: 48px;
      left: -47px;
      z-index: 1;
      border: 2px solid #409eff;
      border-radius: 50%;
      color: #409eff;
      font-weight: bold;
    }
    .show-btn {
      display: inline-block;
      color: #FFF;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background-color: #409eff;
      position: absolute;
      right: -30px;
      top: calc(50% + 20px);
      cursor: pointer;
    }
  }
  .item {
    padding: 20px 45px 10px 45px;
    .arrow-status{
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 30px #4495FF;
      border-left:solid 30px #4495FF ;
      border-bottom:solid 30px transparent;
      border-right:solid 30px transparent;
      &.arrow-1{
        border-top:solid 30px #21D779;
        border-left:solid 30px #21D779 ;
      }
      &.arrow-2{
        border-top:solid 30px #9987FA;
        border-left:solid 30px #9987FA ;
      }
      &.arrow-3{
        border-top:solid 30px #DBDADA;
        border-left:solid 30px #DBDADA ;
      }
      &.arrow-4{
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
      }
      &.arrow-5{
        border-top:solid 30px #B0C7CD;
        border-left:solid 30px #B0C7CD ;
      }
      &.arrow-6{
        border-top:solid 30px #E6A23C;
        border-left:solid 30px #E6A23C ;
      }
    }
    .task-status{
      position: absolute;
      width: 60px;
      line-height: 20px;
      left: -6px;
      top: 11px;
      color: white;
      font-size: 12px;
      transform: rotate(-45deg);
      text-align: center;
      font-weight: normal;
    }
    &::after{
      content: '';
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 15px white;
      border-left:solid 15px white ;
      border-bottom:solid 15px transparent;
      border-right:solid 15px transparent;
    }
    .top {
      display: flex;
      .title {
        width: calc(100% - 58px);
        margin-left: 10px;
        line-height: 24px;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow : hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .title2 {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .bottom{
      p{
        margin: 5px 0 0 0 ;
        color: #79828C;
        i{
          margin-right: 5px;
        }
      }
    }
  }
  .sub-item {
    &::after{
      border-top:solid 15px #ddebf9;
      border-left:solid 15px #ddebf9 ;
    }
  }
  .add-btn {
    display: inline-block;
    color: #FFF;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #FF9540;
    position: absolute;
    right: -30px;
    top: calc(50% - 30px);
    cursor: pointer;
  }
}

</style>